<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css"> -->
    <link rel="stylesheet" href="/dev/assets/css/job/page/JL.css">
    <link rel="stylesheet" href="/dev/assets/css/job/page/JLL.css">
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .navbar {
            background-color: #84ADEA;
            margin: 0;
            min-width: 1450px;
            max-height: 50px!important;
        }

        .navbar-brand {
            font-size: 30px;
            padding: 15px 0px;
        }

        .myinner a {
            color: #fff !important;
        }

        .nav-inner {
            margin: 0px 55px;

        }

        .nav > li a {
            padding: 0;
            height: 50px;
            width: 71px;
            padding: 0px 5px;
            line-height: 50px;
        }
        .nav > li > a {
            position: relative;
             display: inline;
            padding: 10px 5px;
        }

        .nav > li > a img {
            width: 28px;
            border-radius: 50%;
        }

        .nav-city span {
            font-size: 14px;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="nav-inner container-fluid myinner" style="position: relative;">
        <div class="navbar-header" style="">
            <a class="navbar-brand" href="#">职途万里</a>
        </div>
        <div class="nav-city" style="display: inline-block; height: 50px;">
            <div
                    style=" display: inline-block; width: 20px; height: 20px; overflow: hidden; position: relative; margin: 13px 3px 0px 16px;">
                <img src="/dev/assets/img/dingwei.png"
                     style="width: 20px; position: absolute; bottom: 0px;">
            </div>
            <span style="color: #fff; position: absolute; top: 30%; margin-right: 10px" id="city">
                    苏州
                </span>
            <span style="position: absolute; color: #eee; top: 37%; left: 210px; font-size: 10px;">
                    [切换城市]
                </span>
        </div>
        <div style="position: absolute; left: 290px; top: 0px;">
            <ul class="nav navbar-nav" style="margin: 0;">
                <li><a href="/dev/views/job/page/home.html">首页</a></li>
<!--                <li><a href="#">推荐</a></li>-->
                <li><a href="/dev/views/geek-job/geek-job-city.html">职位</a></li>
                <li><a href="/dev/views/geek-job/all-company.html">公司</a></li>
            </ul>
        </div>

        <div class="user-nav nav navbar-nav navbar-right">
            <li><a href="/dev/views/geek-job/buy-resume.html" class="shop">简历商店</a></li>
            <li><a href="/dev/views/job/page/message.html">消息</a></li>
            <li><a href="/dev/views/job/page/resume.html">简历</a></li>
            <li><a style="width: 2px;">|</a></li>
            <li><a href="javascript:k();">上传</a></li>
            <li style="padding: 7px 0px;">
                <a href="/dev/views/job/page/login.html" class="nav-user" id="nav-user" style="width: 90px; height: 36px; line-height: 37px;">
                    <span id="username-nav" style="font-size: 14px;">登录/注册</span>

                </a>
            </li>
        </div>
    </div>
</nav>
<!--<script src="/dev/plugins/jquery.min.js"></script>-->
<!--<script src="../../plugins/bootstrap/js/bootstrap.js"></script> -->
<!--<script src="dev/plugins/layui/layui/layui.js"></script>-->
<!--<script src="/dev/assets/js/common/nav.js"></script>-->
<script>

    function k() {
        console.log("=1=")
        window.location = '/dev/views/job/page/curriculum.html';

    }

    // $(function (){
    let userId = localStorage.getItem("id");
    if (userId!=null){
        $.ajax({
            headers:{
                "id":localStorage.getItem("id"),
                "token":localStorage.getItem("token")
            },
            url: `/dev/navUser/${userId}`,
            type: 'GET',
            success:function (result){
                if (result.code==200){
                    console.log(result)
                    console.log(result.data.jsName)

                    $('#username-nav').text(result.data.jsName)
                    $('#username-nav').css('font-weight','bold')
                    $('#username-nav').css('color','#111')
                    let navUser = document.querySelectorAll('.nav-user')[0]
                    navUser.innerHTML += `<img id="user-tx-nav" style="width: 27px;height: 27px" src="${result.data.avatar}">`

                    layui.use(function(){
                        console.log("====layui====")
                        console.log(layui)
                        var dropdown = layui.dropdown;

                        console.log("==dropdown==")
                        console.log(dropdown)
                        // 自定义事件
                        dropdown.render({
                            elem: '#nav-user',
                            // trigger: 'click' // trigger 已配置在元素 `lay-options` 属性上
                            data: [{
                                // title: 'menu item 1',
                                templet: '<a href="javascript:userInfo();" id="first-nv-1" style="text-align: center;">个人中心</a>',
                                id: 100
                            },{
                            //     // title: 'menu item 2',
                            //     templet: '<a href="javascript:;" id="first-nv-2" style="text-align: center;">切换为招聘者</a>',
                            //     id: 101
                            // },{
                                // title: 'menu item 3',
                                templet: '<a href="javascript:quit();" id="first-nv-3" style="text-align: center;">退出登录</a>',
                                id: 102
                            }],
                            style: 'min-width: 100px;max-width: 115px;'
                        });

                    });


                }
            }
        })
    }

    let city = localStorage.getItem("city")
    console.log("=1=city=")
    console.log(city)
    if (city==null){
        let ip = getPublicIP()
        ip.then(resolve =>
            $.ajax({
                headers:{
                    "id":localStorage.getItem("id"),
                    "token":localStorage.getItem("token")
                },
                url: `/dev/city/${resolve}`,
                type: 'POST',
                success: function (result) {
                    // console.log("=2=")
                    if (result.code == 200) {
                        // console.log(result.data)
                        let data = JSON.parse(result.data)
                        // console.log(data.address)
                        let city = data.address.split("|")[2]
                        // console.log(city)
                        localStorage.setItem("city",city)
                        console.log("=city=")
                        console.log(city)
                        $("#city").text(city)
                    }
                }
            })
        )
    }else {
        $("#city").text(city)
    }

    // })

    function getPublicIP() {
        const apiUrl = "https://api.ipify.org?format=json";
        return new Promise((resolve, reject) => {
                fetch(apiUrl)
                    .then(response => response.json())
                    .then(data => resolve(data.ip))
                    .catch(error => reject(error));
            }
        )
    }


    function quit(){
        localStorage.removeItem("id");
        localStorage.removeItem("token");
        window.location='/dev/views/job/page/home.html'
    }

    function userInfo(){
        window.location='/dev/views/job/page/myuserinfo.html'
    }



</script>


</body>
</html>